<template>
  <div class="price-form-item">
    <el-col
      :span="8"
      v-if="form.name"
    >
      <el-form-item label="名称">
        <el-input
          v-model="form.name"
          placeholder="请输入内容"
          disabled
        />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="尺寸(公制)">
        <div class="sizeStyle">
          <div>
            <el-input
              v-model="form.length"
              placeholder="长"
              disabled
            >
              <template slot="append">CM</template>
            </el-input>
          </div>
          <div style="margin-left: 8px">
            <el-input
              v-model="form.width"
              placeholder="宽"
              disabled
            >
              <template slot="append">CM</template>
            </el-input>
          </div>
          <div style="margin-left: 8px">
            <el-input
              v-model="form.height"
              placeholder="高"
              disabled
            >
              <template slot="append">CM</template>
            </el-input>
          </div>
        </div>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="尺寸(美制)">
        <div class="sizeStyle">
          <div>
            <el-input
              v-model="form.length_AS"
              placeholder="长"
              disabled
            >
              <template slot="append">英寸</template>
            </el-input>
          </div>
          <div style="margin-left: 8px">
            <el-input
              v-model="form.width_AS"
              placeholder="宽"
              disabled
            >
              <template slot="append">英寸</template>
            </el-input>
          </div>
          <div style="margin-left: 8px">
            <el-input
              v-model="form.height_AS"
              placeholder="高"
              disabled
            >
              <template slot="append">英寸</template>
            </el-input>
          </div>
        </div>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="体积(公制)">
        <el-input
          v-model="form.volume"
          placeholder="请输入内容"
          disabled
        />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="体积(美制)">
        <el-input
          v-model="form.volume_AS"
          placeholder="请输入内容"
          disabled
        />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="体积重">
        <el-input
          v-model="form.volume_weight_AS"
          placeholder="请输入内容"
          disabled
        />
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="毛重(公制)">
        <el-input
          v-model="form.weight_gross"
          placeholder="请输入内容"
          disabled
        >
          <template slot="append">kg</template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="毛重(美制)">
        <el-input
          v-model="form.weight_gross_AS"
          placeholder="请输入内容"
          disabled
        >
          <template slot="append">lbs</template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="净重(公制)">
        <el-input
          v-model="form.weight"
          placeholder="请输入内容"
          disabled
        >
          <template slot="append">kg</template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="净重(美制)">
        <el-input
          :value="form.weight_AS"
          placeholder="请输入内容"
          disabled
        >
          <template slot="append">lbs</template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="8">
      <el-form-item label="overSize">
        <el-input
          :value="form.oversize"
          placeholder="请输入内容"
          disabled
        >
          <!-- <template slot="append">lbs</template> -->
        </el-input>
      </el-form-item>
    </el-col>
  </div>
</template>

<script>
export default {
  props: {
    form: {
      type: Object,
      default: () => ({})
    }
  }
}
</script>

<style scoped>
.addExpense {
  padding: 15px;
  background: #fff;
}
/deep/.el-select,
.el-autocomplete {
  width: 100%;
}
.sizeStyle {
  display: flex;
}
.sizeStyle /deep/ .el-input__inner {
  border-right: 0;
}
.sizeStyle /deep/ .el-input-group__append {
  padding-left: 4px;
  padding-right: 4px;
  font-size: 14px;
  color: #333333;
  background: #fff;
}
</style>